{extend name='public/base' /}

{block name="content"}

<div class="layui-col-md12">
	<div class="layui-card">
		<div class="layui-card-body">
			<form action="" class="layui-form" method="get">
				<div class="layui-form-item layui-form-pane">

					<div class="layui-inline">
						<label class="layui-form-label">日期范围：</label>
						<div class="layui-input-inline">
							<input name="both_time" class="layui-input" id="both_time" value="" type="text"
								placeholder="请选择日期">
						</div>
					</div>

					<div class="layui-inline">
						<button class="layui-btn icon-btn layui-btn-sm" data-id="table_id" lay-filter="search"
							lay-submit="">
							<i class="layui-icon"></i>搜索
						</button>
						<button type="reset" class="layui-btn icon-btn layui-btn-normal layui-btn-sm"><i
								class="layui-icon layui-icon-refresh"></i>{:__('Reset')}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>



<div class="layui-col-md12">
	<div class="layui-card">
		<div class="layui-card-body">
			<table class="layui-hide" id="table_id" lay-filter="table_id"></table>
		</div>
	</div>

</div>
{/block}

{block name="js"}
<!--js处理区-->


<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button type="button" lay-event="reload" class="layui-btn  layui-btn-sm  layui-btn-primary">刷新表格</button>
	</div>
</script>


<!--<script type="text/html" id="operationTpl">-->
<!--{{# if(d.id==0){ }}-->
<!--	不可编辑-->
<!--	{{# }else{ }}-->
<!--		<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs {:node('Admin/addAdmin')}"-->
<!--			data-title="编辑类别" lay-event="edit"><i class="layui-icon"></i></a>-->
<!--		<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs {:node('Admin/del')}" data-title="删除类别"-->
<!--			lay-event="del"><i class="layui-icon "></i></a>-->
<!--		{{# } }}-->
<!--</script>-->

<script>
	layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable', 'laydate'], function() {
		var element = layui.element;
		var form = layui.form;
		var table = layui.table;
		var $ = layui.jquery;
		var lucky = layui.lucky;
		var opTable = layui.opTable;
		var laydate = layui.laydate;
		form.render();
		//日期范围
		function addDate() {
			let nowDate = new Date()
			let date = {
				year: nowDate.getFullYear(),
				month: nowDate.getMonth() + 1,
				date: nowDate.getDate()
			}
			this.systemTime = date.year + '-' + date.month + '-' + date.date
		}
		laydate.render({
			elem: '#both_time',
			range: true,
			trigger: 'click'
			// value: new Date()
		});
		TableHeaders({});

		function TableHeaders(datas) {
			$.ajax({
				url: "{:url('TableHeaders')}",
				type: "post",
				data: datas,
				dataType: "json",
				success: function(data) {
					console.log(data)
					initTanle(data)
				}
			});
		}

		function initTanle(data) {
			var TableHeader = [];
			for (var item in data) {
				var Tanle = {};
				Tanle = {
					field: item,
					title: data[item],
					align: 'center',
					width: 120
				};
				TableHeader.push(Tanle);
			}
			console.log(TableHeader)
			table.render({
				elem: '#table_id',
				url: "{:url('tongji')}",
				toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				defaultToolbar: ['filter', 'exports', 'print'],
				even: true, //开启隔行背景
				id: 'table_id',
				// height: 'full-100',100',
				text: {
					none: '暂无相关数据'
				},
				cols: [TableHeader],
				done: function(res) {
					merge(res);
				}
			});
		}

		function merge(res) {
			var data = res.data;
			var mergeIndex = 0; //定位需要添加合并属性的行数
			var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
			var _number = 1; //保持序号列数字递增
			var columsName = ['type', 'cost_name']; //需要合并的列名称
			var columsIndex = [0, 1]; //需要合并的列索引值
			for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
				var trArr = $(".layui-table-body>.layui-table").find("tr"); //所有行

				for (var i = 1; i < data.length; i++) { //这里循环表格当前的数据
					var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]); //获取当前行的当前列
					var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]); //获取相同列的第一列
					// console.log(data[i][columsName[k]])
					console.log(data[i - 1][columsName[k]])
					if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
						mark += 1;
						tdPreArr.each(function() {
							$(this).css("rowspan", mark)
						});
						tdCurArr.each(function() {
							$(this).html('')
							$(this).css("background-color", "#fff")
							$(this).css("border-bottom", "none")
						});
					} else {
						mergeIndex = i;
						mark = 1; //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
					}
				}
				mergeIndex = 0;
				mark = 1;
			}
		}
		/**
		 * 关键词搜索树
		 */
		form.on('submit(search)', function(obj) {
			TableHeaders(obj.field);
			lucky.CreateSearch(obj.field);
			return false;
		});
	});
</script>

{/block}
